<template>
  <div>
    <div style="display: flex; padding: 10px">
      <div style="margin-right: 10px"><el-switch v-model="horizontal"></el-switch> 横向</div>
      <div style="margin-right: 10px"><el-switch v-model="collapsable"></el-switch> 可收起</div>
      <div style="margin-right: 10px"><el-switch v-model="disaled"></el-switch> 禁止编辑</div>
      <div style="margin-right: 10px"><el-switch v-model="onlyOneNode"></el-switch> 仅拖动当前节点</div>
      <div style="margin-right: 10px"><el-switch v-model="cloneNodeDrag"></el-switch> 拖动节点副本</div>
    </div>
    <div style="padding: 0 10px 10px">
      背景色：<el-color-picker v-model="style.background" size="small"></el-color-picker>&nbsp;
      文字颜色：<el-color-picker v-model="style.color" size="small"></el-color-picker>&nbsp;
    </div>
    <div style="height: 400px">
      <vue3-tree-org
        class="large"
        :data="data"
        center
        :horizontal="horizontal"
        :collapsable="collapsable"
        :label-style="style"
        :only-one-node="onlyOneNode"
        :clone-node-drag="cloneNodeDrag"
        :before-drag-end="beforeDragEnd"
        @on-node-drag="nodeDragMove"
        @on-node-drag-end="nodeDragEnd"
        @on-contextmenu="onMenus"
        @on-expand="onExpand"
        @on-node-dblclick="onNodeDblclick"
        @on-node-click="onNodeClick"
      />
    </div>
    <div id="qi">
      <img id="car" src="@/assets/img/1699603242106.png" style="" >
      <div>
        <el-checkbox v-model="checked1" label="25r接40-60百战，精耐2万5以上包过。" size="large" />
      </div>
      <div style="margin-top: -10px;">
        <el-checkbox v-model="checked1" label="可先打后付不用解锁" size="large" />
      </div>
      <div style="margin-top: -10px;">
        <el-checkbox v-model="checked1" label="可长期" size="large" />
      </div>
      <div style="font-size: 16px;">
        <div style="color: #0088ff">
          <el-icon><Sunny /></el-icon>
          <span style="vertical-align: 2px">可私我~或者</span>
          <el-icon><Sunny /></el-icon>
        </div>
        <div style="color: #0088ff">
          <el-icon><Apple /></el-icon>
          <span style="vertical-align: 2px">
            企鹅<span style="color: #fc1010">459</span>爱吃<span style="color: #fc1010">980</span>冰淇淋<span style="color: #fc1010">763</span>斤
          </span>
          <el-icon><Apple /></el-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ElSwitch, ElColorPicker, ElMessage } from 'element-plus'
  import { onMounted, ref } from "vue"
  import { Vue3TreeOrg } from "vue3-tree-org"
  import "vue3-tree-org/lib/vue3-tree-org.css"
  import { useRouter, useRoute } from 'vue-router'
  const router = useRouter()
  const route = useRoute()
  console.log(router.getRoutes())

  const checked1 = ref(true)
  const checked2 = ref(false)

  let data = ref({
    id:1,
    label: "xxx科技有限公司",
    children:[
      {
        id:2,
        pid:1,
        label:"产品研发部",
        style:{color:"#fff",background:"#108ffe"},
        children:[
          {id:6,pid:2,label:"禁止编辑节点",disabled:true},
          {id:8,pid:2,label:"禁止拖拽节点",noDragging:true},
          {id:10,pid:2,label:"测试"}
        ]
      },
      {
        id:3,pid:1,label:"客服部",
        children:[
          {id:11,pid:3,label:"客服一部"},
          {id:12,pid:3,label:"客服二部"}
        ]
      },
      {id:4,pid:1,label:"业务部"}
    ]
  })
  let cloneNodeDrag = ref(true)
  let horizontal = ref(false)
  let collapsable = ref(false)
  let onlyOneNode = ref(true)
  let expandAll = ref(true)
  let disaled = ref(false)
  let style = ref({
    background: "#fff",
    color: "#5e6d82",
  })

  function onMenus({ node, command }) {
    console.log(node, command)
  }
  function onExpand(e: any, data: any) {
    console.log(e, data)
  }
  function onExpandAll(e: any) {
    console.log(e)
  }
  function nodeDragMove(data: any) {
    // console.log(data);
  }
  function beforeDragEnd(node: any, targetNode: any) {
    console.log("beforeDragEnd", node , targetNode)
    return new Promise((resolve, reject) => {
      if (!targetNode) reject()
      if (node.id === targetNode.id || targetNode.label === "禁止编辑节点") {
        reject()
      } else {
        resolve(node)
      }
    })
  }
  function nodeDragEnd(data: any, isSelf: any) {
    console.log(data, isSelf)
  }
  function onNodeDblclick() {
    console.log('onNodeDblclick')
  }
  function onNodeClick(e: any, data: any) {
    ElMessage.info(data.label)
  }
  function expandChange() {
    // this.toggleExpand(this.data, this.expandAll);
  }
  function toggleExpand(data: any, val: any) {
    if (Array.isArray(data)) {
      data.forEach((item) => {
        item.expand = val
        if (item.children) {
          toggleExpand(item.children, val)
        }
      })
    } else {
      data.expand = val
      if (data.children) {
        toggleExpand(data.children, val)
      }
    }
  }
  
  onMounted(() => {
    move()
  })
  function move() {
    let div = document.getElementById('qi')
    let allw = window.innerWidth
    
    let car: HTMLImageElement = document.createElement('img')
    car.src = "/src/assets/img/1699603242106.png"
    car.style.position = 'absolute'
    car.style.left = '10px'
    car.style.top = '0'
    
    console.log(car)
    if (div) {
      div.append(car)
    }
    if (car) {
      let num = 10
      let a = setInterval(() => {
        car.style.left = num + 'px'
        num = num + 10
        if (num > 300) {
          car.style.display = "none"
          clearInterval(a)
        }
      }, 100)
    }
  }
  
</script>

<style scoped>
  #qi {
    position: relative;
    padding: 20px;
    background-color: #fff;
    text-align: center;
  }
  #car {
    position: absolute;
  }
  #car:hover {
    border: 3px solid red;
  }
</style>
